{include file="public/head"/}
<script language="javascript">
	$(document).ready(function () {
		// datatimepicker 设置
		$('.form_datetime').datetimepicker({
			language: 'zh-CN', // en ,zh-CN, pt-BR
			minView: 'month',
			weekStart: 0, //一周从哪一天开始
			todayBtn:  1, //
			autoclose: 1,
			todayHighlight: 1,
			startView: 2,
			forceParse: 0,
			showMeridian: 1
		});

	});
</script>

<div class="container-fluid" id="main">

    <div class="row clearfix">
        <div class="col-md-12 column mainmsg">
            <div class="alert alert-dismissable alert-info">
                <button type="button" class="close">×</button>
                 <p></p>
            </div>
        </div>
    </div>
    <input type="hidden"id="country_id" v-model="data.country_id">
    <input type="hidden" ref="plan_ids" value="{$plan_ids|default=''}">
    <input type="hidden" id="po_id" value="{$po_id|default=''}">
    <input type="hidden" id="company_id" v-model="data.company_id">
   
    <div class="ntDesktop">
    	<div class="ntDesktop-head" type="{$request|default=''}">{$title|default=''}</div>
    
        <div class="row clearfix" style="padding-top:0px">
            <div class="col-md-12 text-right">
                <div>
                    <a href="javascript:history.go(-1)" class="btn btn-default"><span class="glyphicon glyphicon-chevron-left"></span>{:lang('back_to_list')}</a>
                    <a href="javascript:;" class="btn btn-primary" style="padding-left:2em;padding-right:2em;" @click="savefun"> <span class="glyphicon glyphicon-floppy-disk"></span> {:lang('save')}</a>
                </div>
            </div>
        </div>
    
        <div class="row" style="padding:1em">
            <div class="col-md-8">
                <table class="table table-striped table-hover ntTable" v-cloak>
                        <colgroup>
                            <col width="150">
                            <col>
                        </colgroup>
                    <tbody>
                        <tr>
                            <td style="vertical-align:middle">{:lang("delivery_time")}<span class="required"></span></td>
                            <td>
                                <div class="input-group date form_datetime" data-date="2019-12-12" data-date-format="yyyy-mm-dd" data-link-field="workdate">
                                    <input class="form-control" type="text" ref="jhdate" v-model="data.delivery_day" >
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar" style="margin:0"></span></span>
                                </div>
                                <!-- <input type="hidden" id="workdate" value="2019-12-12" /> -->
                            </td>
                        </tr>
                        <tr>
                            <td>{:lang("delivery_address")}<span class="required"></span></td>
                            <td>
                                <select class="form-control" v-model="data.port_id">
                                    <option value="0">{:lang("select_delivery_address")}</option>
                                    <option :value="item.id" v-for="(item,index) in port">{{item.name}}</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>{:lang("designated_company")}<span class="required"></span></td>
                            <td>
                            	<div class="row">
	                                <div class="col-md-12">
                                        <div class="input-group">
                                            <input type="text" class="form-control col-md-12" placeholder="{:lang("enter_the_company_name")}" width="100%" v-model="search">
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-default" @click="getcompany">
                                                    <span class="glyphicon glyphicon-search"></span> {:lang('search')}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>
								<div class="row">
	                                <div class="col-md-12">
                                        <div class="input-group">
                                            <select class="form-control" @change="changecompany" v-model="data.company_id">
                                                <option value="0">{:lang("please_select_company")}</option>
                                                    <option :value="item.id" v-for="(item,index) in company">{{item.name}}</option>
                                            </select>
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-primary" @click="getcominfo">
                                                    <span class="fa fa-file-alt"></span> {:lang("data")}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </td>
                        </tr>
                        <tr>
                            <td>{:lang('contact')}<span class="required"></span></td>
                            <td>
								<div class="row">
	                                <div class="col-md-12">
                                        <div class="input-group">
                                            <select class="form-control" v-model="data.linkman_id">
                                                <option value="0">请选择联系人</option>
                                                <option :value="item.id" v-for="(item,index) in linkman">{{item.name + '/' + item.content}}</option>
                                            </select>
                                            <div class="input-group-btn">
                                                <a :href="'/admin/customer/liaisonedit?liaison?liaisonedit&linkid='+data.linkman_id" type="button" class="btn btn-primary" data-toggle="modal" data-target="#linkman_Modal">
                                                    <span class="glyphicon glyphicon-pencil"></span> {:lang('edit')}
                                                </a>
                                                <a href="/admin/customer/liaisonadd?liaison=liaisonadd" type="button" class="btn btn-primary" data-toggle="modal" data-target="#linkman_Modal">
                                                    <span class="glyphicon glyphicon-plus"></span> {:lang('add')}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <div class="row">
                    <div class="col-md-6">
                        <ul class="nav nav-tabs">
                            <li class="active" id="tab_po_detail">
                                <a href="#po_detail_list" data-toggle="tab">{:lang("purchase_list")}</a>
                            </li>
                            {if condition="$request eq 'edit'"}
                            <li id="tab_po_detail">
                                <a href="#po_pack_list" data-toggle="tab">{:lang("packing_list")}</a>
                            </li>
                            {/if}
                        </ul>
                    </div>
                    <div class="col-md-6 text-right">
                        <div>
                            {if condition="$request eq 'edit'"}
                            <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#pack_editModal" id="btn_add_pack">
                                <span class="fa fa-box-open"></span> {:lang("boxing_content_added")}
                            </button>
                            {/if}

                            <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#plan_addModal">
                                <span class="glyphicon glyphicon-plus"></span> {:lang("purchase_plan_added")}
                            </button>
                        </div>
                    </div>
                </div>

                <div class="row tab-content">
                    <div class="col-md-12 tab-pane active" id="po_detail_list">
                        <table class="table table-striped table-hover ntTable">
                            <thead>
                                <tr>
                                    <th>{:lang("planned_order_number")}</th>
                                    <th>&nbsp;</th>
                                    <th>{:lang('product')}</th>
                                    <th>{:lang("box_measure")}</th>
                                    <th>{:lang("quantity")}</th>
                                    <th>{:lang('price')}/{:lang('amount')}</th>
                                    <th>{:lang("buyer")}</th>
                                    <th>{:lang('operate')}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in plan">
                                    <td>{{item.id}}</td>
                                    <td><img :src="item.img_url" width="48px" height="48px" border="0"></td>
                                    <td>
                                        <small>{{(item.prochar_id ? item.prochar_id : item.pro_id) + (item.brand_name ? '/'+item.brand_name : '') + (item.model ? '/'+item.model : '')}}</small><br>
                                        {{item.pro_name}}
                                    </td>
                                    <td>
                                        {{item.ctn_qty}} <span class="unit">PCS/CTN</span> | {{item.ctn_kgs}} <span class="unit">KGS/CTN</span><br>
                                        {{item.ctn_size}} <span class="unit">CM</span> | {{item.ctn_m3}} <span class="unit">CBM/CTN</span>
                                    </td>
                                    <td>
                                        {{item.qty}} <span class="unit">CTN</span><br />
                                        {{item.qty_sum}} <span class="unit">PCS</span>
                                    </td>
                                    <td>
                                        {{item.price}} <span class="unit">CNY</span><br>
                                        {{item.price_sum}} <span class="unit">CNY</span>
                                    </td>
                                    <td> {{item.nickname}} <br /><small> {{item.delivery_time}} </small></td>
                                    <td class="text-right">
                                        <div>
                                          <button class='btn btn-sm btn-primary' data-toggle="modal" data-target="#plan_detailModal" @click="changeplan(index)"><span class="glyphicon glyphicon-modal-window"></span> {:lang('edit')}</button>
                                          <a href="javascript:;" class='btn btn-sm btn-default' @click="delplan(index,item.id)"><span class="glyphicon glyphicon-trash"></span> {:lang('delete')}</a>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="2" align="center">{:lang('total')}</td>
                                    <td colspan="6" align="right">
                                        <b>
                                        {:lang('product')}： 3 <span class="unit">UN</span> / 
                                        {:lang('box_quantity')}： 200 <span class="unit">CTN</span> / 
                                        {:lang("volume")}： 12.500 <span class="unit">CBM</span> / 
                                        {:lang("weight")}： 200.00 <span class="unit">KGS</span> /
                                        {:lang('amount')}： 20000.00 <span class="unit">CNY</span>
                                        </b>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    {if condition="$request eq 'edit'"}
                    <div class="col-md-12 tab-pane" id="po_pack_list">
                        <table class="table table-striped table-hover ntTable">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>&nbsp;</th>
                                    <th>{:lang('product')}</th>
                                    <th>{:lang("quantity")}</th>
                                    <th>{:lang("box_measure")}</th>
                                    <th>{:lang("volume")}/{:lang("weight")}</th>
                                    <th>{:lang("container")}</th>
                                    <th>{:lang('operate')}</th>
                                </tr>
                            </thead>
                            <tbody>
                                    <tr v-for="(item,index) in packing">
                                        <td>{{item.content !='k' ? item.id : ''}}</td>
                                        <td><img :src="item.img_url" width="48px" height="48px" border="0" v-if="item.content !='k'"></td>
                                        <td>
                                            <template v-if="item.content !='k'">
                                                <small>{{(item.prochar_id ? item.prochar_id : item.pro_id) + (item.brand_name ? '/'+item.brand_name : '') + (item.model ? '/'+item.model : '')}}</small><br>
                                                {{item.pro_name}}
                                            </template>
                                        </td>
                                        <td> {{item.num}} <span class="unit">CTN</span><br /> {{item.num * item.boxnum}} <span class="unit">PCS</span></td>
                                        <td>
                                             {{item.boxnum}}<span class="unit">PCS/CTN</span> | {{item.witch}} <span class="unit">KGS/CTN</span><br>
                                             {{item.size}} <span class="unit">CM</span> | {{item.volume}} <span class="unit">CBM/CTN</span>
                                        </td>
                                        <td>
                                            {{item.volume * item.boxnum}} <span class="unit">CBM</span><br>
                                            {{item.witch * item.boxnum}} <span class="unit">KGS</span>
                                        </td>
                                        <td> 
                                            <a href="##container_detail.php">NT20158</a>(045)<br>
                                            2019-12-25.L
                                        </td>
                                        <td class="text-right">
                                            <div>
                                                <button class='btn btn-sm btn-primary' data-toggle="modal" data-target="#pack_editModal">
                                                <span class="glyphicon glyphicon-pencil"></span> {:lang('edit')}
                                                </button>
                                                <a href="#" class='btn btn-sm btn-default'><span class="glyphicon glyphicon-trash"></span> {:lang('delete')}</a>
                                            </div>
                                        </td>
                                    </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="2" align="center">{:lang('total')}</td>
                                    <td colspan="6" align="right">
                                        <b>
                                        {:lang('product')}： {{sumbox.pro_num}} <span class="unit">UN</span> / 
                                        {:lang("box_quantity")}： {{sumbox.boxnum}} <span class="unit">CTN</span> / 
                                        {:lang("volume")}： {{sumbox.volume}} <span class="unit">CBM</span> / 
                                        {:lang("weight")}： {{sumbox.witch}} <span class="unit">KGS</span>
                                        </b>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    {/if}
                </div>
            </div>

            <div class="col-md-4">
                <div class="row">
                    <ul class="nav nav-tabs">
                        <li class="active">
                        	<a href="#po_finance" data-toggle="tab">{:lang("payment_plan")}<span class="required"></span></a>
                        </li>
                        <li>
                        	<a href="#po_cost" data-toggle="tab">{:lang("other_fee")}</a>
                        </li>
                        <li>
                        	<a href="#po_terms" data-toggle="tab">{:lang("contract_terms")}<span class="required"></span></a>
                        </li>
                        <li>
                        	<a href="#po_total" data-toggle="tab">{:lang('total')}</a>
                        </li>
                        {if condition="$request eq 'edit'"}
                        <li>
                            <a href="#po_log" data-toggle="tab">{:lang("operation_record")}</a>
                        </li>
                        {/if}
                    </ul>
                </div>
            	<div class="row tab-content">
                	<div class="tab-pane in active" id="po_finance">
                    	<div class="row">
                            <div class="col-md-12">
                                <table class="table table-striped table-hover ntTable">
                                    <colgroup>
                                        <col width="100">
                                        <col>
                                    </colgroup>
                                    <tbody>
                                        <tr>
                                            <td colspan="2" class="text-right">
                                            	<div>
                                                	<a :href="'/admin/customer/bankadd?country_id=2&getbank=1'" type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#bank_Modal"> <span class="glyphicon glyphicon-plus"></span> {:lang("add_a_bank_account")} </a>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>{:lang('bank_account')}<span class="required"></span></td>
                                            <td>
                                            	<select class="form-control" v-model="data.bank_id">
                                                    <option value="0">{:lang("please_select_a_bank_account")}</option>
                                                    <option :value="item.id" v-for="(item,index) in bank">{{item.name + '/' + item.bankname + '/' + item.account_name + '/' +item.account_num}}</option>
                                                </select>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div class="row" style="padding-right:2em">
                                	<div class="md-col-12 text-right">
                                    	<div>
                                        <button type="button" class="btn btn-sm btn-default" @click="payplan(1)"> <span class="fa fa-calculator"></span> {:lang("automatic_generated")} 30%+70% </button>
                                        <button type="button" class="btn btn-sm btn-default"  @click="payplan(2)"> <span class="fa fa-calculator"></span> {:lang("automatic_generated")} 100% </button>
                                        <button type="button" class="btn btn-sm btn-primary" @click="openmodel(false)"> <span class="glyphicon glyphicon-plus"></span> {:lang('add')} {:lang('payment_plan')} </button>
                                       	</div>
                                    </div>
                                </div>
                                <table class="table table-striped table-hover ntTable" v-show="this.paypoarr.length">
                                	<thead>
                                    	<tr>
                                        	<td>{:lang("payment_date")}</td>
                                            <td>{:lang('payment_amount')}</td>
                                            <td>百份比</td>
                                            <td>{:lang('operate')}</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(item,index) in this.paypoarr">
                                            <td>{{item.pay_day}}</td> 
                                            <td> {{item.amount}} <span class="unit">CNY</span></td>
                                            <td> {{item.percent}} <span class="unit">%</span></td>
                                            <td>
                                            	<div>
                                                	<button type="button" class="btn btn-sm btn-primary" @click="openmodel(true,index)"> <span class="glyphicon glyphicon-pencil"></span> {:lang('edit')} </button>
                                                    <button type="button" class="btn btn-sm btn-default" @click="delpay(index)"> <span class="glyphicon glyphicon-remove"></span> {:lang('delete')} </button>
                                                </div>
                                            </td>
                                        </tr>
									</tbody>
                                    <tfoot>
                                        <tr>
                                            <td>{:lang("total_payment")}</td>
                                            <td colspan="2" align="right"><span class="red">{{data.price_sum}}</span> <span class="unit">CNY</span></td>
                                            <td>&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td>{:lang("total_pay_for")}</td>
                                            <td colspan="2" align="right"><span class="red">{{data.replace_sum}}</span> <span class="unit">CNY</span></td>
                                            <td>&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td>{:lang("total_payable")}</td>
                                            <td colspan="2" align="right"><span class="red">{{data.price_sum+data.replace_sum}}</span> <span class="unit">CNY</span></td>
                                            <td>&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td>{:lang("total_paid")}</td>
                                            <td colspan="2" align="right"><span class="red">{{data.paid_sum}}</span> <span class="unit">CNY</span></td>
                                            <td>&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <td>{:lang("total_unpaid")}</td>
                                            <td colspan="2" align="right"><span class="red">{{data.price_sum+data.replace_sum-data.paid_sum}}</span> <span class="unit">CNY</span></td>
                                            <td>&nbsp;</td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane" id="po_cost">
                        <div class="col-md-12 text-right" style="padding:0.5em">
                            <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#cost_Modal"> <span class="glyphicon glyphicon-plus"></span> 添加合同费用 </button>
                        </div>
                        <table class="table table-striped table-hover ntTable">
                            <thead>
                                <tr>
                                    <td>{:lang('add/alterar_bank_account')}</td>
                                    <td>{:lang('amount')}</td>
                                    <td>{:lang("apportion")}</td>
                                    <td>{:lang("pay_for")}</td>
                                    <td>{:lang('operate')}</td>
                                </tr>
							</thead>
                            <tbody>
                                <tr v-for="(item,index) in cost_list">
                                    <td>{{item.remarks}}</td>
                                    <td align="right"><span :class="item.amount>0 ? 'green':'red'">{{item.amount}}</span> <span class="unit">CNY</span></td>
                                    <td align="center">{{item.apportion ? 'O' : '-'}}</td>
                                    <td align="center">{{item.is_replace_pay ? 'O' : '-'}}</td>
                                    <td class="text-right">
	                                    <button type="button" class="btn btn-sm btn-default" @click="delother(index)"> <span class="glyphicon glyphicon-remove"></span> {:lang('delete')} </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                	<div class="tab-pane" id="po_terms">
	                    <!-- <div class="row">
							<div class="col-md-12 text-right" style="padding:0.5em 1em">
                                <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#terms_editModal" >
                                    <span class="glyphicon glyphicon-plus"></span>                                     <span class="glyphicon glyphicon-plus"></span> 添加条款 
                                </button>
                            </div>
                        </div> -->
	                    <div class="row">
							<div class="col-md-12">
                                <ul class="nav nav-tabs">
                                    <li class="active">
                                        <a href="#po_terms_normal" data-toggle="tab">{:lang("general_terms")}</a>
                                    </li>
                                    <li>
                                        <a href="#po_terms_enter" data-toggle="tab">{:lang("delivery_terms")}</a>
                                    </li>
                                    <li>
                                        <a href="#po_terms_pay" data-toggle="tab">{:lang("payment_terms")}</a>
                                    </li>
                                    <li>
                                        <a href="#po_terms_after-sale" data-toggle="tab">{:lang("after_sales_terms")}</a>
                                    </li>
                                </ul>
                            </div>
                        </div>

	                    <div class="row">
                            <div class="col-md-12 tab-content">
                                <div class="tab-pane in active" id="po_terms_normal">
                                	<div style="padding:0.5em">
                                        <textarea style="width:100%;height:40vh;" v-model="terms.general_terms.content"></textarea> 
                                    </div>
                                </div>
                                <div class="tab-pane" id="po_terms_enter">
                                	<div style="padding:0.5em">
	                                    <textarea style="width:100%;height:40vh;" v-model="terms.delivery_terms.content"></textarea> 
                                    </div>
                                </div>
                                <div class="tab-pane" id="po_terms_pay">
                                	<div style="padding:0.5em">
	                                    <textarea style="width:100%;height:40vh;" v-model="terms.payment_terms.content"></textarea> 
                                    </div>
                                </div>
                                <div class="tab-pane" id="po_terms_after-sale">
                                	<div style="padding:0.5em">
	                                    <textarea style="width:100%;height:40vh;" v-model="terms.after_sales_terms.content"></textarea> 
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                	<div class="tab-pane" id="po_total">
                        <table class="table table-striped table-hover ntTable">
                            <tbody>
                                <tr>
                                    <td>合计箱数</td>
                                    <td align="right">{{data.qty_sum}} <span class="unit">CTN</span></td>
                                </tr>
                                <tr>
                                    <td>合计体积</td>
                                    <td align="right">{{data.m3_sum}} <span class="unit">CBM</span></td>
                                </tr>
                                <tr>
                                    <td>{:lang("total_weight")}</td>
                                    <td align="right">{{data.kgs_sum}} <span class="unit">KGS</span></td>
                                </tr>
                                <tr>
                                    <td>{:lang("total_amount")}</td>
                                    <td align="right">{{data.price_sum}} <span class="unit">CNY</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="tab-pane" id="po_log">content
                        <div class="div-scroll" style="max-height:50vh">
                            <table class="table table-striped table-hover ntTable">
                                <thead>
                                    <tr>
                                        <td>时间</td>
                                        <td>{:lang('operate')}</td>
                                        <td>{:lang('content')}</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item_l,index_l) in buy_po_logs">
                                        <td>{{item_l.happen_at}}</td>
                                        <td>{{item_l.admin_name}}</td>
                                        <td>{{item_l.content}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




<!-- {:lang("edit_purchase_plan")} -->
<div class="modal fade" id="plan_detailModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content"  style="width:1000px">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="ntModalLabel">{:lang("edit_purchase_plan")}</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="text-center">
                            <img :src="planInfo.img_url"  width="128px" height="128px" border="0">
                            </div>
                            <table class="table table-striped table-hover ntTable" v-cloak>
                                <tbody>
                                    <tr>
                                        <td>{:lang('product')}</td>
                                        <td>
                                            <small>{{(planInfo.prochar_id ? planInfo.prochar_id : planInfo.pro_id) + (planInfo.brand_name ? '/'+planInfo.brand_name : '') + (planInfo.model ? '/'+planInfo.model : '')}} </small><br>
                                            {{planInfo.pro_name}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{:lang("box_measure")}</td>
                                        <td>
                                            {{planInfo.ctn_qty}} <span class="unit">PCS/CTN</span> | {{planInfo.ctn_kgs}} <span class="unit">KGS/CTN</span><br>
                                            {{planInfo.ctn_size}} <span class="unit">CM</span> | {{planInfo.ctn_m3}} <span class="unit">CBM/CTN</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>{:lang("quantity")}</td>
                                        <td align="right"><input type="number" class="form-control text-right" v-model="planInfo.qty"  @input="changeinfo"></td>
                                    </tr>
                                    <tr>
                                        <td>{:lang('price')}</td>
                                        <td align="right"><input type="number" class="form-control text-right" v-model="planInfo.price" @input="changeinfo"></td>
                                    </tr>
                                    <tr>
                                        <td>{:lang("total_quantity")}</td>
                                        <td align="right">{{planInfo.qty_sum}} <span class="unit">CTN</span></td>
                                    </tr>
                                    <tr>
                                        <td>{:lang("total_amount")}</td>
                                        <td align="right">{{planInfo.price_sum}} <span class="unit">CNY</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-8">
                            <table class="table table-striped table-hover ntTable" v-cloak>
                                <tbody>
                                    <tr>
                                        <td>采购订单编号</td>
                                        <td>{{planInfo.id}}</td>
                                        <td>{:lang("designated_buyer")}</td>
                                        <td>{{planInfo.nickname}}</td>
                                    </tr>
                                    <tr>
                                        <td>{:lang("delivery_time")}</td>
                                        <td>{{planInfo.delivery_time}}</td>
                                        <td>{:lang("delivery_address")}</td>
                                        <td>{{planInfo.address}}</td>
                                    </tr>
                                    <tr>
                                        <td>指定采购公司</td>
                                        <td colspan="3">{{planInfo.company_name}}</td>
                                    </tr>
                                </tbody>
                            </table>
                            <table class="table table-striped table-hover ntTable" v-cloak>
                                <tbody>
                                    <tr v-for="(item,index) in planInfo.prodesc_cat">
                                        <td>
                                            <b>{{item.name}}</b>
                                            <textarea class="form-control" style="width:100%;height:12vh" v-model="planInfo.prodesc_cat[index].content">
                                            </textarea>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>{:lang('close')}</button>
                    <button type="button" class="btn btn-primary" @click="editsavefun"><span class="glyphicon glyphicon-floppy-disk"></span>{:lang('save')}</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
</div>
    
<!-- 添加/编辑装箱内容 -->
<div class="modal fade" id="pack_editModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg" >
        <div class="modal-content" style="width:1000px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="ntModalLabel">{:lang("add/edit_boxed_content")}</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="alert alert-dismissable alert-info">
                            <button type="button" class="close">×</button>
                            <p></p>
                        </div>
                    </div>
                </div>
                <div class="row" style="padding:0.5em">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>{:lang("packing_content")}</label>
                            <select class="form-control" v-model="onwpacking.content" v-cloak>
                                <option value="k">{:lang("add_na_empty_box")}</option>
                                <option v-for="(item,index) in plan" :value="index" :pro_id="item.pro_id" :prochar_id="item.prochar_id
                                "><small>{{(item.prochar_id ? item.prochar_id : item.pro_id) + (item.brand_name ? '/'+item.brand_name : '') + (item.model ? '/'+item.model : '')}}</small>
                                        {{item.pro_name}}</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>{:lang('box_quantity')}</label>
                            <input type="number" class="form-control" name="qty" placeholder=""  v-model="onwpacking.boxnum">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>{:lang("quantity")}/CTN</label>
                            <input type="number" class="form-control" name="ctn_qty" placeholder="每箱数量"  v-model="onwpacking.num">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>{:lang('box_measure')}</label>
                            <input type="text" class="form-control" name="ctn_size" placeholder="长x宽x高" v-model="onwpacking.size">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>{:lang("weight")}/CTN</label>
                            <input type="number" class="form-control" name="ctn_kgs" placeholder="{:lang('weight_per_box')}" v-model="onwpacking.witch">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>{:lang("volume")}/CTN</label>
                            <input type="number" class="form-control" name="ctn_m3" placeholder="{:lang('volume')}" v-model="onwpacking.volume">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>{:lang('remark')}</label>
                            <textarea class="form-control" style="height:6em" v-model="onwpacking.note"></textarea>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <label class="checkbox-inline">
                            <input type="checkbox" value="option2" v-model="onwpacking.ischeck"> {:lang("update_box_specifications_to_contract_details")}
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>{:lang('cancel')}</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" style="padding-left:24px;padding-right:24px" @click="saveboxcon"><span class="glyphicon glyphicon-floppy-disk"></span>{:lang('save')}</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div class="modal fade" id="bank_Modal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content"  style="width:1000px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>



<!-- 付款安排 -->

<div class="modal fade" id="pay_Modal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 payment">
                        <div class="alert alert-dismissable alert-info">
                            <button type="button" class="close">×</button>
                            <p></p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-striped table-hover ntTable">
                            <tbody>
                                <tr>
                                    <td style="vertical-align:middle">{:lang("payment_date")}<span class="required"></span></td>
                                    <td colspan="3">
                                    	<div class="row">
                                        	<div class="col-md-12">
                                                <div class="input-group date form_datetime" data-date="2019-12-12" data-date-format="yyyy-mm-dd" data-link-field="workdate">
                                                    <input class="form-control" type="text" ref="fkdate" v-model="onwpayplan.pay_day">
                                                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar" style="margin:0"></span></span>
                                                </div>
                                        	</div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>{:lang('amount')}<span class="required"></span></td>
                                    <td><input type="number" class="form-control text-right" @input="changemn" v-model="onwpayplan.amount"></td>
                                    <td>百份比<span class="required"></span></td>
                                    <td><input type="text" class="form-control text-right" @input="cahngehalf(onwpayplan.percent)" v-model="onwpayplan.percent"></td>
                                </tr>
                                <tr>
	                                <td>{:lang("automatic_input")}</td>
                                    <td colspan="4">
                                    	<button  type="button" class="btn btn-default" @click="cahngehalf(10)">10% </button>
                                        <button  type="button" class="btn btn-default" @click="cahngehalf(20)">20% </button>
                                        <button  type="button" class="btn btn-default" @click="cahngehalf(30)">30% </button>
                                        <button  type="button" class="btn btn-default" @click="cahngehalf(40)">40% </button>
                                        <button  type="button" class="btn btn-default" @click="cahngehalf(50)">50% </button>
                                        <button  type="button" class="btn btn-default" @click="cahngehalf(60)">60% </button>
                                        <button  type="button" class="btn btn-default" @click="cahngehalf(70)">70% </button>
                                        <button  type="button" class="btn btn-default" @click="cahngehalf(80)">80% </button>
                                        <button  type="button" class="btn btn-default" @click="cahngehalf(90)">90% </button>
                                        <button  type="button" class="btn btn-default" @click="cahngehalf(100)">100% </button>
                                        <button  type="button" class="btn btn-default" @click="remafun">{:lang("balance")} </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <input type="hidden" id="msg-amount" value="{:lang('please_enter_the_correct_amount_or_percentage')}">
                <input type="hidden" id="msg-time" value="{:lang('please_select_the_time')}">
                <input type="hidden" id="msg-monny" value="{:lang('please_enter_the_correct_amount_or_percentage')}">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>{:lang('cancel')}</button>
                <button type="button" class="btn btn-primary" @click="savepay" style="padding-left:24px;padding-right:24px"><span class="glyphicon glyphicon-floppy-disk"></span>{:lang('save')}</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- 公司资料显示 -->

<div class="modal fade" id="co_detailModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="ntModalLabel">{:lang("company_information")}</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-striped table-hover ntTable" v-cloak>
                            <tbody>
                                <tr>
                                    <td>{:lang('serial_number')}</td>
                                    <td>{{conpanyinfo.id}}</td>
                                </tr>
                                <tr>
                                    <td>{:lang('name')}</td>
                                    <td>{{conpanyinfo.name}}</td>
                                </tr>
                                <tr>
                                    <td>{:lang('address')}</td>
                                    <td>{{conpanyinfo.addr}}</td>
                                </tr>
                                <tr>
                                    <td>{:lang('ZIP_CODE')}</td>
                                    <td>{{conpanyinfo.zipcode}}</td>
                                </tr>
                                <tr>
                                    <td>{:lang('belongs_to_seller')}</td>
                                    <td>{{conpanyinfo.nickname}}</td>
                                </tr>
                                <tr>
                                    <td>{:lang('edit')}</td>
                                    <td>{{conpanyinfo.create_name}}{{conpanyinfo.create_time ? ('/' + conpanyinfo.create_time) : ''}}</td>
                                </tr>
                                <tr>
                                    <td>{:lang('status')}</td>
                                    <td>{{conpanyinfo.status}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>{:lang('close')}</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- 联系人弹窗 -->
<div class="modal fade" id="linkman_Modal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content" style="width:1000px">
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
</div>


<div class="modal fade" id="plan_addModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg" style="width:80%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="ntModalLabel">{:lang("purchase_plan_added")}</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 payment">
                        <div class="alert alert-dismissable alert-info">
                            <button type="button" class="close">×</button>
                            <p></p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">{:lang('purchase_plan_list')}</div>
                    <div class="col-md-10">
                        <div class="input-group">
                            <input type="text" class="form-control col-md-12" placeholder="{:lang("enter_purchase_plan_ID,_product_name,_role_ID_or_model")}" width="100%" v-model="searchText">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default" @click="getplan(false)">
                                    <span class="glyphicon glyphicon-search"></span> {:lang('search')}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-5 text-right" v-cloak>
                        <ul class="nav nav-tabs">
                            <li :class="{'active':index==0}" v-for="(item,index) in montharr"><a href="#" data-toggle="tab" @click="getplan(item)">{{index==0 ? '本月' : item.month+'月'}}</a></li>
                        </ul>            	
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-striped table-hover ntTable" v-cloak>
                            <thead>
                                <tr>
                                    <th class="sorting"> No. </th>
                                    <th>&nbsp;  </th>
                                    <th class="sorting"> {:lang('product')} </th>
                                    <th> {:lang("quantity")} </th>
                                    <th> {:lang("box_measure")} </th>
                                    <th> {:lang("price")} </th>
                                    <th> {:lang('total')} </th>
                                    <th class="sorting"> {:lang("purchase")} </th>
                                    <th class="sorting"> {:lang('delivery_time')} </th>
                                    <th> {:lang('operate')} </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in Willbe">
                                    <td style="vertical-align:middle">{{item.id}}</td>
                                    <td style="vertical-align:middle"><img src="../img/pro_icon48.jpg" border="0"></td>
                                    <td> <small>{{item.id + (item.brand_name ? '/'+item.brand_name : '') + (item.model ? '/'+item.model : '')}}</small> <br />{{item.pro_name}} </td>
                                    <td>
                                        <input type="number" class="form-control text-right" v-model="Willbe[index].qty" style="width:6em" @input="
                                        item.qty_sum=item.ctn_qty*item.qty 
                                        item.price_sum=item.ctn_qty*item.qty*item.price">
                                    </td>
                                    <td>
                                        {{item.ctn_qty}} <span class="unit">PCS/CTN</span><br>
                                        {{item.ctn_kgs}} <span class="unit">KGS/CTN</span>
                                    </td>
                                    <td>
	                                    <input type="number" class="form-control text-right" v-model="Willbe[index].price" style="width:6em" @input="
                                        item.price_sum=item.ctn_qty*item.qty*item.price">
                                    </td>
                                    <td>
                                        {{item.qty_sum}}  <span class="unit">PCS</span><br>
                                        {{item.price_sum}}  <span class="unit">CNY</span>
                                    </td>
                                    <td> {{item.nickname}} <br> <small> {{item.company_name}} </small> </td>
                                    <td> {{item.delivery_time}} <br /> <small>{{item.address}}</small> </td>
                                    <td style="vertical-align:middle" class="text-right">
                                    	<a href="javascript:;" class='btn btn-sm btn-default' @click="addplan(index)"><span class="glyphicon glyphicon-plus"></span> {:lang("add_in")}</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>{:lang('close')}</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- {:lang("other_fee")} -->

<div class="modal fade" id="cost_Modal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel" aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="ntModalLabel">{:lang("add_other_purchase_ontract_expenses")}</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="alert alert-dismissable alert-info">
                            <button type="button" class="close">×</button>
                            <p></p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-striped table-hover ntTable" v-cloak>
                            <tbody>
                                <tr>
                                    <td>{:lang("expenditure_or_income_content")}<span class="required"></span></td>
                                    <td>
                                        <div class="input-group" style="width:100%">
                                            <div class="input-group-btn">
                                                <select  class="form-control" name="" id="" style="width: 200px;" @change="addother.remarks=addother.selcontent" v-model="addother.selcontent">
                                                    <option value="0" selected>{:lang("common_options")}</option>
                                                    <option :value="item" v-for="(item,index) in commonly" >{{item}}</option>
                                                </select>
                                            </div>
                                            <input type="text" class="form-control col-md-12" width="100%" v-model="addother.remarks">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
	                                <td>&nbsp;</td>
                                    <td>
                                        <label class="radio-inline">
                                            <input type="radio" name="optionsCheckboxsinline" value="1" v-model="addother.In_and_out"> {:lang('income')}
                                        </label>
                                        <label class="radio-inline">
                                            <input type="radio" name="optionsCheckboxsinline" value="0" v-model="addother.In_and_out"> {:lang('expenditure')}
                                        </label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>{:lang('amount')}<span class="required"></span></td>
                                    <td colspan="3">
                                        <div class="input-group" style="width:100%">
                                            <input type="number" class="form-control text-right" v-model="addother.amount" >
                                            <span class="input-group-addon">
                                                <input type="checkbox" v-model="addother.apportion"> {:lang("allocated_to_cost")}
                                            </span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
	                                <td>&nbsp;</td>
                                    <td>
                                        <label class="checkbox-inline">
                                            <input type="checkbox" name="optionsCheckboxsinline" v-model="addother.is_replace_pay"> {:lang("this_amount_is_paid_by_the_supplier")}
                                        </label>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>{:lang('cancel')}</button>
                <button type="button" class="btn btn-primary" @click="saveother" style="padding-left:24px;padding-right:24px"><span class="glyphicon glyphicon-floppy-disk"></span>{:lang('save')}</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</div>

<script src="/static/Admin/js/plan2po.js"></script>
{include file="public/foot"/}